<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
		"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<title>dojo.html.set test</title>

	<script src='../../dojo.js' djConfig='isDebug:true, parseOnLoad:false'></script>
	<script src='../../html.js'></script>
	<script src='../../../util/doh/runner.js'></script>
	<script>
		dojo.require('doh.runner');
		dojo.require('dojo.html');
		dojo.require('dojo.NodeList-html');

		/* test goals
		 * injecting content as string, node, nodelist. 
		 * injecting exotic nodes/markup e.g. table rows, lists
		 * injecting whole html documents (extractContent option)
		 * parsing resulting content
		 
		 * cleanup when setting content
		*/
		dojo.declare("dojo.html.test.SimpleThing", null, {
			constructor: function(params, node) {
				node.setAttribute("test", "ok");
			}
		});
		
		dojo.declare("dojo.html.test.ParserInstantiateTester", null, {
			constructor: function(params, node) {
				node.setAttribute("test", "ok");
			}
		});
		dojo.declare("dojo.html.test.DeclarativeContentSetter", dojo.html._ContentSetter, {
			postscript: function() {
				this.set();
			}
		});
		
		
		dojo.addOnLoad(function(){

			function ieTrimSpaceBetweenTags(str){
				return str.replace(/(<[a-z]*[^>]*>)\s*/ig, "$1");
			}


			targetNode = null; 
			
			doh.register("basicChecks", [
					{
						name: 'set',
						runTest: function(t){
							console.log("basicChecks: " + this.name);
							targetNode = dojo.byId("pane1");
							var msg = "Simple No-params Test";
							console.log("targetNode has content: ", targetNode.innerHTML);
							var result = "";
							dojo.html.set(
								targetNode,
								msg
							);
							console.log("after set, targetNode has content: ", targetNode.innerHTML);
							t.assertEqual(msg, targetNode.innerHTML);
						}
					},
					{
						name: 'setContentWithOnEnd',
						runTest: function(t){
							console.log("basicChecks: " + this.name);
							targetNode = dojo.byId("pane1");
							var msg = "setContentWithOnEnd Test";
							var result = false;
							dojo.html.set(
								targetNode,
								msg, 
								{
									onEnd: function() {
										dojo.getObject(this.declaredClass).prototype.onEnd.call(this);
										result = true;
									}
								}
							);
							t.assertEqual(msg, targetNode.innerHTML);
							t.assertTrue(result);
						}
					},
					{
						name: 'setContent_with_parsing',
						runTest: function(t){
							console.log("basicChecks: " + this.name);
							var cont = '<div dojoType="dojo.html.test.SimpleThing" jsId="ifrs" data="{}"></div>';
							dojo.html.set(
								dojo.byId("pane1"),
								cont,
								{	
									postscript: function() {
										this.set();

										t.assertTrue(typeof ifrs != "undefined" && ifrs.declaredClass=="dojo.html.test.SimpleThing");
										t.assertTrue(this.parseResults.length > 0);
									},
									parseContent: true
								}
							);
						}
					},
					{
						name: 'emptyElement',
						runTest: function(t){
							console.log("basicChecks: " + this.name);
							var msg = "setContentWithOnEnd Test";
							var node = dojo.byId("pane1");
							node.innerHTML = '<div><span>just</span>some test<br/></div>text';
							var cNodes = node.childNodes.length;
							
							dojo.html._emptyNode(dojo.byId("pane1"));
							t.assertTrue(node.childNodes.length == 0 && node.innerHTML == "");
						}
					},
					// the following tests use the _emptyNode function, so ensure it passes before
					// head-scratching over any failures that follow
					{
						name: 'changeContentTRHead',
						runTest: function(t){
							console.log("basicChecks: " + this.name);
							targetNode = dojo.query('table#tableTest > thead > tr')[0];
							
							var html = "<td><div>This</div>Should<u>Work</u></td>";
							dojo.html.set(
								targetNode, 
								html, 
								{
									"testname": "basicChecks changeContentTRHead"
								}
							);
							var res = ieTrimSpaceBetweenTags(targetNode.innerHTML.toLowerCase());
							t.assertEqual(html.toLowerCase(), res);
						},
						tearDown: function(){
							dojo.html._emptyNode(targetNode);
						}
					},
					{
						name: 'changeContentTHead',
						runTest: function(t){
							console.log("basicChecks: " + this.name);
							targetNode = dojo.query('table#tableTest > thead')[0];

							var html = "<tr><td><div>This</div>Should<u>Work</u></td></tr>";
							dojo.html.set(
								targetNode, 
								html, 
								{
									"testname": "basicChecks changeContentTHead"
								}
							);
							var res = ieTrimSpaceBetweenTags(targetNode.innerHTML.toLowerCase());
							t.assertEqual(html.toLowerCase(), res);
						},
						tearDown: function(){
							dojo.html._emptyNode(targetNode);
						}
					},
					{
						name: 'changeContentTRBody',
						runTest: function(t){
							console.log("basicChecks: " + this.name);
							targetNode = dojo.query('table#tableTest > tbody > tr')[0];
							var html = "<td><div>This</div>Should<u>Work</u></td>";
							dojo.html.set(
								targetNode,
								html, 
								{
									"testname": "basicChecks changeContentTRBody"
								});
							var res = ieTrimSpaceBetweenTags(targetNode.innerHTML.toLowerCase());
							t.assertEqual(html.toLowerCase(), res);
						},
						tearDown: function(){
							dojo.html._emptyNode(targetNode);
						}
					},
					{
						name: 'changeContentTBody',
						runTest: function(t){
							console.log("basicChecks: " + this.name);
							targetNode = dojo.query('table#tableTest > tbody')[0];
							var html = "<tr><td><div>This</div>Should<u>Work</u></td></tr>";
							dojo.html.set(
								targetNode, html, 
								{
									"testname": "basicChecks changeContentTBody"
								});
							var res = ieTrimSpaceBetweenTags(targetNode.innerHTML.toLowerCase());
							t.assertEqual(html.toLowerCase(), res);
						},
						tearDown: function(){
							dojo.html._emptyNode(targetNode);
						}
					},
					{
						name: 'changeContentTable',
						runTest: function(t){
							console.log("basicChecks: " + this.name);
							targetNode = dojo.query('table#tableTest')[0];
							var html = "<tbody><tr><td><div>This</div>Should<u>Work</u></td></tr></tbody>";
							dojo.html.set(
								targetNode, html, 
								{
									"testname": "basicChecks changeContentTable"
								});
							var res = ieTrimSpaceBetweenTags(targetNode.innerHTML.toLowerCase());
							t.assertEqual(html.toLowerCase(), res);
						},
						tearDown: function(){
							dojo.html._emptyNode(targetNode);
						}
					},
					{
						name: 'setNodeList',
						runTest: function(t){
							console.log("basicChecks: " + this.name);
							var tmpUL = dojo.create("ul");
							dojo.create("li", { innerHTML: "item 1" }, tmpUL);
							dojo.create("li", { innerHTML: "item 2" }, tmpUL);
							console.log("ul content: ", tmpUL.innerHTML, tmpUL.childNodes.length);
							targetNode = dojo.byId("pane1");
							dojo.html.set(
								targetNode, tmpUL.childNodes, 
								{
									"testname": "basicChecks setNodeList"
								});
							var res = dojo.query("li", dojo.byId("pane1")).length
							t.assertEqual(2, res);
						},
						tearDown: function(){
							dojo.html._emptyNode(targetNode);
						}
					},
					{
						name: 'setMixedContent',
						runTest: function(t){
							console.log("basicChecks: " + this.name);
							
							targetNode = dojo.byId("pane1");
							var html = '<h4>See Jane</h4>'
							 + 'Look at her <span>Run</span>!';
							dojo.html.set(
								targetNode, html, 
								{
									"testname": "basicChecks setMixedContent"
								});
							var res = ieTrimSpaceBetweenTags(targetNode.innerHTML.toLowerCase());
							t.assertEqual(html.toLowerCase(), res);
						},
						tearDown: function(){
							dojo.html._emptyNode(targetNode);
						}
					},
					{
						name: 'extractContent',
						runTest: function(t){
							console.log("basicChecks: " + this.name);
							targetNode = dojo.byId("pane1");
							var html = ''
							+'<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">'
							+'<html>											'
							+'	<head>											'
							+'		<title>										'
							+'			the title									 '
							+'		</title>									'
							+'	</head>											'
							+'	<body>											'
							+'		<p>											'
							+'			This is the <b>Good Stuff</b><br>		'
							+'		</p>										'
							+'	</body>											'
							+'</html>											';
							
							dojo.html.set(
								targetNode, html, 
								{
									"testname": "basicChecks changeContentTable", 
									extractContent: true
								});
							t.assertTrue(targetNode.innerHTML.indexOf("title") == -1);
							t.assertTrue(dojo.query("*", targetNode).length == 3);
						},
						tearDown: function(){
							dojo.html._emptyNode(targetNode);
						}
					}
				]); 
				doh.register("nodelistExtension", [
					{
						name: 'nodelistHtml',
						runTest: function(t){
							console.log("nodelistExtension: " + this.name);

							dojo.query(".zork").html("<li dojoType='dojo.html.test.ParserInstantiateTester'>1</li><li dojoType='dojo.html.test.ParserInstantiateTester'>2</li><li dojoType='dojo.html.test.ParserInstantiateTester'>3</li>", 
							{ 
								parseContent: true, 
								onBegin: function() {
									this.content = this.content.replace(/([0-9])/g, "MOOO");
									this.inherited("onBegin", arguments);
								}
							}).removeClass("notdone").addClass("done");
							
							var liNodes = dojo.query(".zork > li");
							
							// test to make sure three li's were added to class="zork" node (3x 3 set li's)
							t.assertEqual(9, liNodes.length);

							// test the innerHTML's got replaced in our onBegin
							t.assertTrue( liNodes.every(function(n) { return n.innerHTML.match(/MOOO/) }) ); 
							console.log(this.name + ": innerHTML.match subtest was ok");
							
							// test the parent elements got the correct className
							t.assertTrue( dojo.query(".zork").every(function(n) { return n.className == "zork done"; }) );
							console.log(this.name + ": li.className subtest was ok");
							
							// and test the parser correctly created object from the child nodes 
							// ...they should all have a test attribute now
							t.assertTrue( liNodes.every(function(n) { return n.getAttribute("test") == "ok"; }) );
							console.log(this.name + ": Tester instantiation subtest(getAttribute) was ok");
							
						},
						tearDown: function(){
							// dojo.html._emptyNode(targetNode);
						}
					}, 
					{
						name: "nodeListSimple",
						runTest: function(t){
							var txt = "foo";
							dojo.query("#simpleText").html("<p>"+txt+"</p>");

							// check if its there at all
							var len = dojo.query("#simpleText p").length;
							t.assertEqual(1, len);
							
							// check the inner html is right:
							var p = dojo.query("#simpleText p")[0];
							t.assertTrue( p && p.innerHTML == txt );
						}
					}
				]);
				doh.register("fromMarkup", [
					{
						name: 'contentOpFromMarkup',
						runTest: function(t){
							console.log("fromMarkup: " + this.name);

							dojo.parser.parse("markupSetContentOp");
							t.assertTrue(dojo.byId("markupPane").innerHTML == "markupSetContentOp: new node content");
						},
						tearDown: function(){
							dojo.byId("markupPane").innerHTML = "initial content";
						}
					},
					{
						name: 'extendedContentOpFromMarkup',
						runTest: function(t){
							console.log("fromMarkup: " + this.name);

							dojo.parser.parse("markupSetContentOpX");

							t.assertTrue(dojo.byId("markupPane").innerHTML == "markupSetContentOpX: new node content".toUpperCase());
						},
						tearDown: function(){
							dojo.byId("markupPane").innerHTML = "initial content";
						}
					}
				]);
				doh.register("reuse", [
					{
						name: 'ContentSetterReUse',
						runTest: function(t){
							console.log("fromMarkup: " + this.name);

							targetNode = dojo.byId('pane1');
							var args = [
								[
									"simple"
								], 
								[
									'<div dojoType="dojo.html.test.SimpleThing" jsId="id00">parsed content</div>', 
									{
										parseContent: true
									}
								],
								[
									'<div dojoType="dojo.html.test.SimpleThing" jsId="id01">parsed content</div>',
									{
										parseContent: true
									}
								]
							];
							var setter = new dojo.html._ContentSetter({
								node: targetNode
							});
							dojo.forEach(args, function(applyArgs) {
								setter.node = targetNode; 
								setter.set.apply(setter, applyArgs); 
								setter.tearDown();
							});
							t.assertTrue(id00 && id01); 
							// check we cleaned up after ourselves
							t.assertFalse(setter.parseResults);
						},
						tearDown: function(){
							dojo.byId("markupPane").innerHTML = "initial content";
						}
					}
				]);



			doh.run();
		}); 
	</script>
	<style>
		@import "../../../dojo/resources/dojo.css";

		.box {
			border: 1px solid black;
			height: 190px;
			width: 80%;
			overflow: auto;
		}
		.zork {
			width: 200px;
			margin: 10px;
			list-style-type: none;
		}
		.notdone {
			color: #999; background-color: #ccc;
		}
		.done {
			color: #fff; background-color: #090;
		}
		.done li {
			border: 1px; background-color: orange;
			width: 180px;
		}
		.red {
			color: red;
		}

	</style>
</head>
<body class='tundra'>
	<h1>dojo.html.set</h1>

	<div id="pane1"></div>
	<div id="pane2"></div>
	<table id='tableTest' class='box'>
		<thead>
			<tr>
				<td></td>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td></td>
			</tr>
		<tbody>
	</table>
	<ul class="zork notdone">initial content</ul>
	<ul class="zork notdone">initial content</ul>
	<ul class="zork notdone">initial content</ul>

	<div id="markupPane">initial content</div>
	<div id="markupSetContentOp">
		<div dojoType="dojo.html.test.DeclarativeContentSetter" node="markupPane" content="markupSetContentOp: new node content"></div>
	</div>
	<div id="markupSetContentOpX">
		<div dojoType="dojo.html.test.DeclarativeContentSetter" jsId="markupSetContentOpX_setter" node="markupPane" content="markupSetContentOpX: new node content">
		<script type="dojo/method" event="onBegin">
			this.content = this.content.toUpperCase();
			console.log(this.id + ", made my content look like this:" + this.content);
		</script>
		<script type="dojo/method" event="onFoo">
			console.log("dojo/method supplied onBegin");
			this.content = this.content.toUpperCase();
		</script>
		</div>
	</div>
	<div id="another">
		<div id="myTest9" dojoType="dojo.html.test.DeclarativeContentSetter">
			Some content
			<script type="dojo/method">
				console.log("parsed me!");
			</script>
		</div>
	</div>
	<h1 id="simpleText">test</h1>
</body>
</html>
